<template>
	<view class="calendar-bg flex flex-column">
		<view class="flex1" @click="close"></view>
		<uni-calendar
		ref="calendar"
		class="calendar"
		:insert="true"
		:lunar="false" 
		:showMonth="false"
		:start-date="startDate"
		:end-date="endDate"
		@change="change"
		 />
		 <!-- <view style="height: 70rpx;"></view> -->
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		emits: ["change", "close"],
		data() {
			return {
				startDate: '',
				endDate: ''
			};
		},
		created() {
			this.startDate = moment().add(3, 'days').format('YYYY-MM-DD')
			this.endDate = moment().add(30, 'days').format('YYYY-MM-DD')
		},
		methods:{
			change(e) {
				this.$emit("change", e)
			},
			close(e) {
				this.$emit("close")
			},
			setDate(date) {
				this.$refs.calendar.setDate(date)
			}
		}
	}
</script>

<style lang="scss">
.calendar-bg{
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background:rgba(0,0,0,.4);
}
.calendar{
	width: 100%;
}
/deep/ {
	
	.uni-calendar-item__weeks-box.uni-calendar-item--isDay {
		background: #fff;
	}
	.uni-calendar-item__weeks-box .uni-calendar-item--isDay-text{
		background-color: rgba(0,0,0,0);
	}
	
	.uni-calendar-item--isDay-text{
		color: #333;
	}
	.uni-calendar-item--isDay .uni-calendar-item--isDay-text{
		color: #fff;
	}
	
	.uni-calendar-item--isDay .uni-calendar-item__weeks-box-item{
		background-color: $uni-color-orange;
		color: #fff;
		border-radius: 50%;
	}
	
	.uni-calendar-item__weeks-box.uni-calendar-item--checked{
		background-color: #fff;
		.uni-calendar-item__weeks-box-item{
			background-color: $uni-color-orange;
			color: #fff;
			border-radius: 50%;
		}
	}
	.uni-calendar__backtoday{
		display: none;
	}
	.uni-calendar__weeks-day,
	.uni-calendar__header-text{
		font-weight: bold;
		font-size: 30rpx;
	}
}

</style>
